<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.id == ''"
              style="color: red"
              >*</span
            >
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="施工单位"
          align="center"
          width="180"
          ><template slot-scope="scope">
            <span v-if="scope.row.unit !== ''">{{ scope.row.unit }}</span>
            <el-input
              v-else
              placeholder="请填写施工单位名称"
              v-model="unitInput"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="level"
          label="施工等级"
          align="center"
          width="150"
          ><template slot-scope="scope">
            <span v-if="scope.row.level !== ''">{{ scope.row.level }}</span>
            <el-select
              v-else
              v-model="levelInput"
              placeholder="请选择"
            >
              <el-option
                v-for="item in commonData[0].options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select> </template
        ></el-table-column>
        <el-table-column
          prop="lineType"
          label="线别"
          align="center"
          width="150"
          ><template slot-scope="scope">
            <span v-if="scope.row.lineType !== ''">{{
              scope.row.lineType
            }}</span>
            <el-select
              v-else
              v-model="lineTypeInput"
              placeholder="请选择"
            >
              <el-option
                v-for="item in commonData[1].options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select> </template
        ></el-table-column>
        <el-table-column
          label="施工时间"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.startDate !== ''">
              <p>起： {{ scope.row.startDate }}</p>
              <p>止： {{ scope.row.endDate }}</p>
            </div>
            <div v-else>
              <div style="display: flex; margin-bottom: 5px">
                起：
                <el-date-picker
                  style="display: inline-block"
                  v-model="startDateInput"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="施工开始时间"
                >
                </el-date-picker>
              </div>
              <div style="display: flex">
                止：
                <el-date-picker
                  style="display: inline-block"
                  v-model="endDateInput"
                  type="date"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  placeholder="施工结束时间"
                >
                </el-date-picker>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="施工范围"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.rangeStartKm !== ''">
              <p>
                起：DK{{ scope.row.rangeStartKm }}+{{ scope.row.rangeStartM }}
              </p>
              <p>止：DK{{ scope.row.rangeEndKm }}+{{ scope.row.rangeEndM }}</p>
            </div>
            <div v-else>
              <div style="display: flex; margin-bottom: 5px">
                起：DK
                <el-input
                  style="width: 40%"
                  v-model="rangeStartKmInput"
                  size="mini"
                  placeholder="请填写千米"
                ></el-input
                >+
                <el-input
                  style="width: 40%"
                  v-model="rangeStartMInput"
                  size="mini"
                  placeholder="请填写米"
                ></el-input>
              </div>
              <div style="display: flex">
                止：DK
                <el-input
                  style="width: 40%"
                  v-model="rangeEndKmInput"
                  size="mini"
                  placeholder="请填写千米"
                ></el-input
                >+
                <el-input
                  style="width: 40%"
                  v-model="rangeEndMInput"
                  size="mini"
                  placeholder="请填写米"
                ></el-input>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="topSpeed"
          label="最高时速"
          align="center"
          width="100"
          ><template slot-scope="scope">
            <span v-if="scope.row.topSpeed !== ''"
              >{{ scope.row.topSpeed }}Km/h</span
            >
            <el-input
              v-else
              v-model="topSpeedInput"
              placeholder="Km/h"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="num"
          label="施工人数"
          align="center"
          width="100"
          ><template slot-scope="scope">
            <span v-if="scope.row.num !== ''">{{ scope.row.num }}人</span>
            <el-input
              v-else
              v-model="numInput"
              placeholder="人数"
            ></el-input></template
        ></el-table-column>
        <el-table-column
          prop="content"
          label="施工内容"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.content !== ''">{{ scope.row.content }}</span>
            <el-input
              v-else
              v-model="contentInput"
              type="textarea"
              resize="none"
              :rows="1"
              placeholder="请填写施工内容"
            ></el-input></template
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-else
              type="text"
              @click="saveHandler(scope.row)"
              >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getConstructionProtect,
  constructionProtectDetail,
  saveConstructionProtect,
  updateConstructionProtect,
  deleteConstructionProtect,
} from '/src/http/productSchedule/constructProtectMg.js'
import { autoClick } from '/src/utils/autoClick.js'
import { getDataType } from '/src/http/dictionary.js'
export default {
  data() {
    return {
      unitInput: '',
      levelInput: '',
      lineTypeInput: '',
      startDateInput: '',
      endDateInput: '',
      rangeStartKmInput: null,
      rangeStartMInput: null,
      rangeEndKmInput: null,
      rangeEndMInput: null,
      topSpeedInput: '',
      numInput: null,
      contentInput: '',
      commonData: [
        { type: 'construct_level', options: [] },
        { type: 'ht_line_type', options: [] },
        { type: 'sys_org_type', options: [] },
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
    }
  },

  mounted() {
    this.getConstructionProtectApi()
    this.getDataTypeApi()
  },

  methods: {
    handleSizeChange(v) {
      this.pageSize = v
      this.getConstructionProtectApi(this.currentPage, v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
      this.getConstructionProtectApi(v, this.pageSize)
    },

    saveHandler(v) {
      let params = {
        unit: this.unitInput,
        level: this.levelInput,
        lineType: this.lineTypeInput,
        startDate: this.startDateInput,
        endDate: this.endDateInput,
        rangeStartKm: this.rangeStartKmInput,
        rangeStartM: this.rangeStartMInput,
        rangeEndKm: this.rangeEndKmInput,
        rangeEndM: this.rangeEndMInput,
        topSpeed: this.topSpeedInput,
        num: this.numInput,
        content: this.contentInput,
      }
      this.saveConstructionProtectApi(params)
      this.unitInput = ''
      this.levelInput = ''
      this.lineTypeInput = ''
      this.startDateInput = ''
      this.endDateInput = ''
      this.rangeStartKmInput = ''
      this.rangeStartMInput = ''
      this.rangeEndKmInput = ''
      this.rangeEndMInput = ''
      this.topSpeedInput = ''
      this.numInput = ''
      this.contentInput = ''
    },

    deleteHandler(v) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteConstructionProtectApi({ idList: [v] })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      autoClick()
    },

    getDataTypeApi() {
      for (let i = 0; i < this.commonData.length; i++) {
        getDataType({ type: this.commonData[i].type }).then((res) => {
          if (res.code == 200) {
            this.commonData[i].options = res.data
          }
        })
      }
    },

    getConstructionProtectApi(pageNum = 1, pageSize = 10) {
      let params = { pageNum, pageSize }
      getConstructionProtect(params).then((res) => {
        console.log('res::: ', res)
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total

          if (res.data.records.length >= this.pageSize) return

          this.renderData.push({
            id: '',
            unit: '',
            level: '',
            lineType: '',
            startDate: '',
            endDate: '',
            rangeStartKm: '',
            rangeEndKm: '',
            topSpeed: '',
            num: '',
            content: '',
          })
        }
      })
    },

    constructionProtectDetailApi(params) {
      constructionProtectDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },

    saveConstructionProtectApi(params) {
      saveConstructionProtect(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          this.getConstructionProtectApi(pgn, this.pageSize)
          this.currentPage = pgn
        } else {
          this.$message.error(res.message)
        }
      })
    },

    updateConstructionProtectApi(params) {
      updateConstructionProtect(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },

    deleteConstructionProtectApi(params) {
      deleteConstructionProtect(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          if (this.renderData.length == 1 && this.total / this.pageSize > 1) {
            this.getConstructionProtectApi(this.currentPage - 1, this.pageSize)
            this.currentPage = this.currentPage - 1
          } else {
            this.getConstructionProtectApi(this.currentPage, this.pageSize)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-input__inner) {
  border: none;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.el-textarea__inner) {
  border: none !important;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
}
</style>
